<!-- 企业认证分类 -->
<template>
  <div class="company-classify">
    <div class="item" v-for="item in itemList" :key="item.type" @click="goVerify(item)">
      <div class="item-corver">
        <div class="img-corver">
          <img :src="item.img" />
        </div>
        <div class="title-corver">
          <p class="title">{{ item.title }}</p>
          <p class="title-hover">立即认证</p>
        </div>
      </div>
    </div>
    <el-dialog
      title="医疗机构"
      :visible.sync="hospitalNextLevelVisable"
      width="600px">
      <el-form ref="formData" :model="formData" :rules="formRules" label-width="140px">
        <el-form-item label="医疗机构性质：" prop="hospitalDetailLevelKey">
          <el-radio-group v-model="formData.hospitalDetailLevelKey">
            <el-radio
              v-for="item in hospitalLevelCategory"
              :key="item.type"
              :label="item.type"
            >{{item.title}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hospitalNextLevelVisable = false">取 消</el-button>
        <el-button type="primary" @click="confirmToRedirect">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {listCompanyTypeVO} from '@api/auth_center_v1'
export default {
  name: 'CompanyClassify',
  data() {
    return {
      hospitalLevelCategory:[
        {title: '公立医院',type: '101001'},
        {title: '私立医院',type: '101002'},
        {title: '军队医院',type: '101003'},
      ],
      hospitalNextLevelVisable: false,
      formData:{
        hospitalDetailLevelKey: '',
      },
      formRules:{
        hospitalDetailLevelKey: [
          { required: true, message: '请选择医疗机构性质', trigger: 'change' }
        ],
      },
      type: '',
      itemList: [
        // 100–原厂-生产企业，101–医疗机构，102–企业-经营企业，103–第三方服务/审计公司，104–服务商
        {
          img: require('../../../../m-front-common/pc/assets/img/register/pc-gzt-qyfl-jjqy-icon.png'),
          title: '经营企业',
          type: '102'
        },
        {
          img: require('../../../../m-front-common/pc/assets/img/register/pc-gzt-qyfl-scqy-icon.png'),
          title: '生产企业',
          type: '100'
        },
        {
          img: require('../../../../m-front-common/pc/assets/img/register/pc-gzt-qyfl-zcczr-icon.png'),
          title: '注册证持有人',
          type: '105'
        },
        {
          img: require('../../../../m-front-common/pc/assets/img/register/pc-gzt-qyfl-yljg-icon.png'),
          title: '医疗机构',
          type: '101'
        },
        {
          img: require('../../../../m-front-common/pc/assets/img/register/pc-gzt-qyfl-fws-icon.png'),
          title: '服务商',
          type: '104'
        },
        {
          img: require('../../../../m-front-common/pc/assets/img/register/pc-gzt-qyfl-sjgs-icon.png'),
          title: '第三方服务/审计公司',
          type: '103'
        }
      ]
    }
  },
  mounted() {
    this.getCompanyList()
  },
  methods: {
    getCompanyList() {
      this.$axios({
        method: 'get',
        url: listCompanyTypeVO
      }).then(res => {
        // 100–原厂-生产企业，101–医疗机构，102–企业-经营企业，103–第三方服务/审计公司，104–服务商
        console.log(res)
        this.companyTypeList = res.data.payload || []
      })
    },
    goVerify(item) {
      // 为了下一个方法能用到
      this.type = item.type;
      if(item.type === '101') {
        this.hospitalNextLevelVisable = true
      } else {
        this.$router.push({
          path: '/company/authentication/verify',
          query: {type: item.type}
        });
      }
    },
    confirmToRedirect() {
      this.$refs.formData.validate((valid) => {
        if(valid) {
          this.$router.push({
            path: '/company/authentication/verify',
            query: {dtype: this.formData.hospitalDetailLevelKey,type:this.type}
          });
        }
      })
    }
  }
}
</script>
<style lang="less">
.company-classify {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  .item {
    width: 33.33%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .img-corver{
      padding: 20px 30px;
      border: 1px solid transparent;
      border-radius: 3px 3px 0 0;
      img {
        width: 160px;
        height: 160px;
      }
    }
    .title-corver{
      position: relative;
      width: 222px;
      height: 50px;
      .title{
        width: 222px;
        font-size: 22px;
        color: #333333;
        letter-spacing: 0;
        line-height: 50px;
        background: #fff;
        text-align: center;
        position: absolute;
        z-index: 1;
      }
      .title-hover{
        width: 222px;
        font-size: 22px;
        color: #fff;
        letter-spacing: 0;
        line-height: 50px;
        background: #4D84FF;
        border-radius:0 0 3px 3px;
        text-align: center;
        position: absolute;
      }
    }
    .item-corver{
      &:hover{
        .img-corver{
          border: 1px solid #4D84FF;
          box-shadow: 0 0 10px 0 rgba(133,170,253,0.52);
        }
        .title-hover{
          z-index: 2;
          box-shadow: 0 0 10px 0 rgba(133,170,253,0.52);
        }
      }
    }
  }
  .dialog-footer{
    display: flex;
    justify-content: center;
  }
  .el-button{
    border-radius: 4px;
  }
  .el-button--primary{
    background: #4D84FF;
  }
  .el-button--default{
    background: #f4f4f4;
  }
  .el-radio__input.is-checked + .el-radio__label{
    color: #4D84FF;
  }
  .el-radio__input.is-checked .el-radio__inner {
    border-color: #4D84FF;
    background: #4D84FF;
  }
}
</style>
